<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree &raquo; Demos</title>

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.cookie.js"></script>
<script type="text/javascript" src="js/lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="js/lib/jquery.metadata.js"></script>
<script type="text/javascript" src="js/lib/sarissa.js"></script>
<script type="text/javascript" src="js/jquery.tree.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.checkbox.js"></script>
<script type="text/javascript"
	src="js/plugins/jquery.tree.contextmenu.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.cookie.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.hotkeys.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.metadata.js"></script>
<script type="text/javascript"
	src="js/plugins/jquery.tree.themeroller.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.xml_flat.js"></script>
<script type="text/javascript"
	src="js/plugins/jquery.tree.xml_nested.js"></script>

<link type="text/css" rel="stylesheet" href="syntax/shCore.css" />
<link type="text/css" rel="stylesheet" href="syntax/shThemeDefault.css" />
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
}

body,td,th,pre,code,select,option,input,textarea {
	font-family: "Trebuchet MS", Sans-serif;
	font-size: 10pt;
}

#container {
	width: 800px;
	margin: 10px auto;
	overflow: hidden;
}

.demo {
	height: 200px;
	width: 300px;
	float: left;
	margin: 0;
	border: 1px solid gray;
	font-family: Verdana;
	font-size: 10px;
	background: white;
	overflow: auto;
}

.code {
	width: 490px;
	float: right;
	margin: 0 0 10px 0;
	border: 1px solid gray;
}

pre {
	display: block;
}

.syntaxhighlighter {
	margin: 0 0 0 0 !important;
	padding: 0 !important;
}
</style>
</head>
<body>
<div id="container">
<h1 class="title">Async JSON demo</h1>
<p>Same as with the HTML datastore you can load data from a file.</p>
<script type="text/javascript" class="source">
	var stat =	[
	     		{ attributes : { "id" : "node_1" }, data : "Node 1" },
	     		{ attributes : { "id" : "node_2" }, data : "Node 2", state : "closed"},
	     		{ attributes : { "id" : "node_3" }, data : "Node 3", state : "closed"}
	     	];
	     	$(function () { 
	     		$.ajaxSetup({cache:false});//ajax调用不使用缓存
	     		$("#async_json_1").tree({
	     			data : { 
	     				type : "json",
	     				async : true,
	     				opts : {
	     					async : true,
	     					method : "GET",
	     					url : "async_json_data.json"
	     				}
	     			},
	     			lang:{   
	     	           loading:"目录加载中……"  //在用户等待数据渲染的时候给出的提示内容，默认为loading   
	     	            },   
	     			ui:{
		     			  theme_name:'classic'  //设置样式
		     		   },
	     			callback : { 
	     				// Make sure static is not used once the tree has loaded for the first time
	     				onload : function (t) { 
	     					t.settings.data.opts.static = false; 
	     				},
	     				//n--节点，t是tree
	     				beforedata : function (n, t) { 
	     					if(n == false)
		     					 t.settings.data.opts.static = stat;
	     					else 		     					
	     					    return {parent_Id/*参数名称*/ : $(n).attr("id") || false}// AJAX调用参数传递
	     				}
	     			},
	     			//插件使用右键菜单支持自定义右键菜单
	     			plugins:{
		     			  contextmenu:{}
		     			}
		     			
	     		});
	     	});
	</script>
<div class="demo" id="async_json_1"></div>
</div>
</body>
</html>